<!--
 * @description 组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view
		class="pure-nav-bar"
		:class="_classes"
		:style="_styles"
	>
		<view
			class="pure-nav-bar__container"
			id="PureNavBar"
		>
			<view
				class="pure-nav-bar__status-bar"
				v-if="withStatusBar"
			></view>
			<view class="pure-nav-bar__wrapper">
				<view
					class="pure-nav-bar__left"
					v-if="isBack || $slots.left"
				>
					<slot name="back">
						<view
							class="pure-nav-bar__back"
							v-if="isBack"
							:hover-class="hoverClass"
							@tap="_handleBack"
						>
							<view
								class="pure-nav-bar__back__icon"
								v-if="backIconName"
							>
								<pure-icon
									:name="backIconName"
									v-bind="backOpts"
								></pure-icon>
							</view>
							<text
								class="pure-nav-bar__back__text"
								v-if="backText"
								>{{ backText }}</text
							>
						</view>
					</slot>
					<slot name="left"></slot>
				</view>
				<slot>
					<view class="pure-nav-bar__title"> {{ title }} </view>
				</slot>
				<view
					class="pure-nav-bar__right"
					v-if="$slots.right"
				>
					<view class="pure-nav-bar__right__content">
						<slot name="right"></slot>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import commonComponentOptions from "../../config/options";
	export default {
		options: commonComponentOptions
	};
</script>

<script setup>
	import { ref, computed, onMounted, getCurrentInstance } from "vue";
	import props from "./props";
	import { isString, getRect } from "@/uni_modules/pure-utils";

	// 组件实例
	const _instance = getCurrentInstance();
	// 系统状态栏高度
	const _statusBarHeight = ref(uni.getSystemInfoSync()?.statusBarHeight);
	// 系统可使用窗口的顶部位置
	const _screenTop = ref(uni.getSystemInfoSync()?.screenTop);
	// 胶囊按钮
	const _menuButtonInfo = ref();
	// 组件高度
	const _componentHeight = ref(0);

	// -------------------------------------------------------------------------------- Props
	const _props = defineProps(props);

	// -------------------------------------------------------------------------------- Emits
	const _emits = defineEmits(["onBack"]);

	// -------------------------------------------------------------------------------- Classes
	const _classes = computed(() => {
		const array = [];

		// 标题对齐方式
		if (_props.titleAlign) array.push(`pure-nav-bar--title-align--${_props.titleAlign}`);

		// 安全胶囊区域
		if (_props.safeMenuButton) array.push("pure-nav-bar--safe-menu-button");

		// 固定在顶部
		if (_props.isFixed) array.push("pure-nav-bar--is-fixed");

		return array;
	});

	// -------------------------------------------------------------------------------- Styles
	const _styles = computed(() => {
		const array = [];

		// 胶囊按钮宽度
		if (_menuButtonInfo.value?.width)
			array.push(`--pure-nav-bar-menu-button-width: ${_menuButtonInfo.value.width}px`);

		// 状态栏高度
		if (_props.statusBarHeight) array.push(`--pure-nav-bar-status-bar-height: ${_props.statusBarHeight}`);
		else array.push(`--pure-nav-bar-status-bar-height: ${_statusBarHeight.value}px`);

		// 高度
		if (_props.height) array.push(`--pure-nav-bar-height: ${_props.height}`);
		else array.push(`--pure-nav-bar-height: ${_navBarHeight.value}px`);

		// 背景
		if (_props.background) array.push(`--pure-nav-bar-background: ${_props.background}`);

		// 高度
		array.push(`--pure-nav-bar-component-height: ${_componentHeight.value || 0}px`);

		return array;
	});

	// 系统导航栏高度
	const _navBarHeight = computed(() => {
		if (_screenTop?.value) return _screenTop.value - _statusBarHeight.value;
		return 44;
	});

	onMounted(async () => {
		// #ifdef MP
		_menuButtonInfo.value = uni?.getMenuButtonBoundingClientRect?.();
		// #endif

		// 获取真实高度
		_componentHeight.value = (await getRect("#PureNavBar", _instance))?.height || 0;

		// 挂载到全局，方便使用
		uni.$pureNavBarHeight = _componentHeight.value;
	});

	// 返回按钮点击事件
	function _handleBack() {
		if (_props.autoBack) {
			uni.navigateBack({
				delta: 1
			});
			return;
		}
		_emits("onBack");
	}

	defineExpose({
		height: _componentHeight
	});
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>
